$transition-duration = 0.3s
$transition-delay = 0s

.image-viewer {
  position fixed
  left 0
  top 0
  width 100%
  height 100%
  display flex
  align-items center
  justify-content center
  background rgba(0, 0, 0, 0)
  visibility hidden
  z-index 1000
  padding 6%
  box-sizing border-box
  transition-property visibility, background
  transition-delay $transition-delay, $transition-delay
  transition-duration $transition-duration, $transition-duration
  transition-timing-function ease, ease

  &.active {
    background rgba(0, 0, 0, 0.6)
    visibility visible

    .image-box {
      transform scale(1)
      padding 2rem

      .image-info {
        display block
      }
    }


  }


  .image-box {
    position relative;
    width 60%
    height 100%
    display flex
    flex-direction column
    justify-content center
    align-items center
    transform scale(0)
    transition-property transform
    transition-delay $transition-delay
    transition-duration $transition-duration
    transition-timing-function ease


    @media (max-width: 1200px) {
      width 80%
    }

    .img {
      cursor zoom-out
      max-width 100%
      max-height 100%
    }

    .image-info {
      display none
      padding 10rem

      .item {
        margin 0 6rem
      }
    }

  }
}
